<template>
	<view class="chuangfa">
		<!-- '+(isPc?'45%':'calc(100% - 11px)')+' -->
		<view :class="isPc?'regrsf regrsf_pc':'regrsf regrsf_os'"
			:style="(tabbarValue>=0?'margin: 5px 5px;':'width:0%')+';opacity:' +(tabbarValue>=0?1:0)">
			<view v-if="tabbar[tabbarValue]&&tabbar[tabbarValue].children&&tabbar[tabbarValue].children[0]"
				class="assdfs" v-for="(ite,ind) in (tabbar[tabbarValue]&&tabbar[tabbarValue].children)" :key="ind">
				<view :class="ind==0?'assdfs_top':'assdfs_top topxx'">
					<view class="">{{ite.name}}</view>
					<view v-if="ind==0" style="cursor: pointer" @click="assdfsClick">
						<uv-icon size="24" name="close"></uv-icon>
					</view>
				</view>
				<view class="assort">
					<view class="assort_s cursor-pointer" v-for="(item,index) in ite.children" :key="index"
						:style="tabbarChecked==(index+ind*10)?'background-color:#eeeeee ;':''"
						@mouseenter="tabbarChecked = (index+ind*10)" @mouseleave="tabbarChecked = -1"
						@click="clickContent(item)">
						<view class="item_box">
							<uv-icon v-if="item.pic" :size="isPc?45:35" :label="item.name" labelPos="bottom"
								:name="'/static/level3/'+item.pic+'.svg'"></uv-icon>
							<uv-icon v-else :size="isPc?45:35" :label="item.name" labelPos="bottom"
								:name="tabbarsValue==item.en? item.actIcon:item.icon"></uv-icon>
						</view>
					</view>
				</view>
			</view>
			<view v-else>
				{{tabbarValue||100}}
			</view>
		</view>
	</view>
</template>

<script>
	// 引入
	import config from '@/common/config'
	import {
		uploadFile
	} from '@/common/api.js';
	export default {
		components: {},
		data() {
			return {
				tabbar: config.tabbar,
			}
		},
		computed: {},
		onLoad() {},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
			// #ifdef APP-NVUE
			this.scrollTop = e.detail.scrollTop;
			// #endif
		},
		methods: {
			assdfsClick() {
				this.$uv.vuex('tabbarValue', -1);
			},
			clickContent(e) {
				if (e.url) this.routed(e.url);
			},
			routed(url = '') {
				if (!url) return;
				uni.$uv.route({
					url: url
				})
			}
			// routed(url) {
			// 	uni.$uv.route({
			// 		url: url,
			// 		intercept(params, next) {
			// 			console.log(params, next)
			// 			uni.showLoading({
			// 				title: '等待中...'
			// 			})
			// 			// 模拟处理等待
			// 			setTimeout(() => {
			// 				uni.hideLoading();
			// 				next(true);
			// 			}, 1000)
			// 		}
			// 	})
			// }
		}
	}
</script>

<style scoped lang="scss">
	.chuangfa {
		width: 45vw;
		
		.regrsf {
			border: 1px solid #ccc;
			border-radius: 10px;
			background-color: #fafafa;
			overflow: hidden;
			transition: width 2s;

			.ai_time {
				width: auto;
				width: 100%;
				padding-bottom: 5px;
				border-right: 1px solid #ccc;

				.ai_time_s {
					border-radius: 5px;
					padding: 3px 0px;
					margin-top: 5px;
					flex-wrap: nowrap;
					cursor: pointer;

					.item_box {
						display: flex;
						justify-content: center;
						align-items: center;
						margin: 5px 10px;
					}
				}
			}

			.assdfs {
				// border: 1px solid #ccc;
				// border-radius: 10px;
				// background-color: #fafafa;
				// margin: 10px 10px 0px;

				.assdfs_top {
					padding: 5px 10px;
					border-bottom: 1px solid #ccc;
					display: flex;
					justify-content: space-between;
					background-color: #ffffff;
				}

				.topxx {
					border-top: 1px solid #ccc;
				}

				.assort {
					display: flex;
					justify-content: space-evenly;
					align-items: center;
					max-width: 100%;
					padding: 0px 5px 5px;

					.assort_s {
						width: 50px;
						display: flex;
						justify-content: center;
						align-items: center;
						border-radius: 5px;
						padding: 3px 10px;
						margin-top: 5px;

						.item_box {
							display: flex;
							justify-content: flex-start;
							align-items: center;
							margin: 5px 10px;
							// height: 100%;
						}
					}
				}

			}
		}

		.regrsf_os {
			width: calc(100% - 12px);
			height: calc(100vh - 120px);
			position: absolute;
			z-index: 2;
		}

		.regrsf_pc {
			// width: 50%;
		}
	}
</style>